  :root {
    --layout-padding: 0px;
    --transition-very-quick: 0.1s;
    --transition-quick: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;
    --transition-very-slow: 0.9s;
    --transition-delay-none: 0s;
    --transition-delay-normal: 0.1s;
    --transition-delay-bit: 0.2s;
    --transition-delay-medium: 0.3s;
    --transition-delay-more: 0.4s;
    --transition-delay-macro: 0.5s;
    --transform-down-middle: 8%;
    --transform-down-beside: 4%;
  }
  
  
  /* 移除移动端聚焦边框 */
  * {
   -webkit-tap-highlight-color: transparent; /* 透明 */
  }
  button:active,
  input[type="button"]:active,
  input[type="submit"]:active,
  input[type="reset"]:active {
    background-color: transparent;
    outline: none; /* 去掉点击时的聚焦边框 */
  }
  a:active {
    background-color: transparent;
    outline: none;
  }
  
  /* 选中高亮样式 */
  ::selection {
    background-color: rgba(0, 0, 0, 0.2); /* 浅灰色 */
    color: inherit; /* 继承父元素的文字颜色 */
  }
  
  /* 滚动条样式 */
  /* 整体 */
  ::-webkit-scrollbar {
    width: 0.8rem;
    /* transition: var(--transition-normal); */
  }
  /* ::-webkit-scrollbar:hover {
    width: 16px;
  } */
  /* 轨道 */
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-track:hover {
    background: rgba(0, 0, 0, 0.06);
  }
  /* 滑块 */
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer; /* 鼠标变手 */
    /* 还是经典好用 */
    /* cursor: grab; 鼠标变抓手 */
  }
  ::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.6);
    /* cursor: grabbing; 抓手 */
  }
  
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    color: #FFF;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: white;
  }
  
  
  .title {
    position: fixed;
    height: 4rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 36px;
    background-color: rgba(0, 0, 0, 0.02);
    backdrop-filter: blur(50px) brightness(100%);
    border-radius: 0px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between; /* 均匀分布子元素 */
    transition: var(--transition-quick);
    transform: translateY(-100%);
    pointer-events: none; /* 隐藏时不可点击 */
    z-index: 99;
    --title-line-height-normal: 4rem;
    --title-transform-down-middle: calc(var(--transform-down-middle) / 2);
    --title-transform-down-beside: calc(var(--transform-down-beside) / 2);
  }
  #title.visible {
    transform: translateY(0);
    pointer-events: auto; /* 显示时可点击 */
  }

  #second_floor_box {
    height: var(--second_floor_height);
    min-width: 1060px;
    width: 100%;
    position: fixed;
    top: var(--second_floor_height);
    left: 0%;
    background-color: rgba(255, 0, 0, 0.3);
    z-index: var(--second-floor-z-index);
    transform: translateY(0);

    --second_floor_height: 100%;
    --second-floor-z-index: 199;
  }
  #second_floor_cover_box {
    height: var(--second_floor_height);
    width: 100%;
    position: fixed;
    /* background-color: rgba(0, 94, 255, 0.3); */
    /* transition: calc(var(--transition-very-slow) * 2.4);
    transition-timing-function: cubic-bezier(.04,.99,.57,1);
    transition-delay: calc(var(--transition-delay-macro) * 1.8); */
    transform: translateY(0);
    z-index: calc(var(--second-floor-z-index) + 100);
  }
  #second_floor_cover_img {
    height: var(--second_floor_height);
    width: 100%;
    background-color: rgba(55, 0, 255, 0.3);
    background-size: cover; /* 图片按比例填充 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 防止图片平铺 */
  }
  #second_floor_cover_text_box {
    height: var(--second_floor_height);
    width: 100%;
    background-color: rgba(255, 136, 0, 0);
    /* transition: calc(var(--transition-very-slow) * 2.4);
    transition-timing-function: cubic-bezier(.04,.99,.57,1);
    transition-delay: calc(var(--transition-delay-macro) * 2); */
    transform: translateY(-90%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    opacity: 100%;
  }
  #second_floor_cover_text_title {
    height: clamp(40px, 12%, 120px);
    width: 80%;
    object-fit: contain;
    /* opacity: 60% */
    /* 注意性能 */
    filter: drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.3));
  }
  #second_floor_cover_text_description {
    height: clamp(10px, 4%, 80px);
    width: 80%;
    object-fit: contain;
    /* transition: calc(var(--transition-very-slow) * 2.4);
    transition-timing-function: cubic-bezier(.04,.99,.57,1);
    transition-delay: calc(var(--transition-delay-macro) * 2.4); */
    transform: translateY(80%);
    /* opacity: 40% */
    /* 注意性能 */
    filter: drop-shadow(0px 0px 4px rgb(0, 0, 0, 0.6));
  }

  #second_floor {
    height: var(--second_floor_height);
    width: 100%;
    position: fixed;
    background-color: rgb(255, 255, 255, 1);
    /* transition-delay: calc(var(--transition-delay-macro) * 6.8); */
    transform: translateY(0);
    z-index: calc(var(--second-floor-z-index) - 1);
  }
  #second_floor_title {
    background-color: rgb(0, 0, 0, 0.05);
    transform: translateY(0);
    pointer-events: auto; /* 可点击 */
    z-index: calc(var(--second-floor-z-index) + 1);
  }
  #second_floor_title_in {
    height: 100%;
    width: 100%;
    display: flex;
  }
  .section_second_floor {
    flex: 1;
    z-index: calc(var(--second-floor-z-index) + 2);
  }
  #first_section_second_floor {
    background-color: rgb(202, 200, 255, 0.5);
    cursor: pointer; /* 鼠标变手 */
  }

  #second_floor_body {
    height: calc(100% - 4rem);
    width: 88%;
    position: relative;
    top: 4rem;
    margin: 0 auto; /* 水平居中 */
    /* background-color: rgba(255, 0, 0, 0.3); */
    overflow-y: auto; /* 添加垂直滚动条 */
  }
  #second_floor_body_in {
    height: 200%;
    width: 100%;
    /* background-color: rgb(202, 200, 255, 0.3); */
    display: flex;
    flex-direction: column;
  }
  #second_floor_body_top {
    width: 100%;
    box-sizing: border-box;
  }
  #second_floor_body_top_in {
    min-height: 420px;
    height: 34rem;
    max-height: 600px;
    box-sizing: border-box;
    margin: calc(var(--layout-padding) / 2);
    background-color: rgb(255, 146, 18, 0.3);
    display: flex;
    gap: 1rem;
  }
  #second_floor_body_top_left {
    aspect-ratio: 3/2; /* 宽高比3/2 */
    background-color: rgb(0, 0, 0, 0.2);
  }
  #second_floor_body_top_rigth {
    flex: 1;
    background-color: rgb(0, 0, 0, 0.1);
    overflow-y: auto; /* 添加垂直滚动条 */
  }
  #second_floor_body_top_right_list {
    height: 200%;
    width: 100%;
    background-image:linear-gradient(180deg,#FFD26F 15%,#3677FF 100%);
  }
  #second_floor_body_bottom {
    background-color: rgba(37, 164, 255, 0.3);
    flex: 1;
  }

  
  #background {
    height: 1000rem;
    width: 100%;
    min-width: 1060px;
    margin: 0 auto; /* 水平居中 */
    display: flex;
    flex-direction: column;
  }
  
  
  #head {
    min-height: 155px;
    height: 10.375vw;
    max-height: 240px;
    /* height: clamp(155px, 10.375vw, 240px); 有点问题 25/03/14 00:30 来自自己 */
    min-width: 1060px;
    background-color: rgb(202, 200, 255);
    background-image: url(img/head_img.png@3840w_360h_1c.webp);
    background-size: cover; /* 图片按比例填充 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 防止图片平铺 */
    box-shadow: 0px 50px 40px 20px rgba(0, 0, 0, 0.17) inset,
                0px 45px 30px 0px rgba(0, 0, 0, 0.15) inset,
                0px 85px 40px 0px rgba(0, 0, 0, 0.1) inset;
    --background-head-title-line-height-normal: 4rem;
  }
  
  #head > img {
    height: 40px;
    position: relative;
    --logo-top: 1.2rem;
    --logo-left: 6rem;
    top: var(--logo-top);
    left: var(--logo-left);
    filter: drop-shadow(0px 0px 20px rgb(0, 0, 0))
            /* drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3)) */
            ;
  }
  
  #head_title {
    height: var(--background-head-title-line-height-normal);
    margin-top: 0.06rem;
    display: flex;
    justify-content: space-between; /* 均匀分布子元素 */
    /* justify-content: center; 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 0 20px;
    pointer-events: auto; /* 显示时可点击 */
    transition: var(--transition-very-quick);
    transform: translateY(0);
    --head-transform-down-middle: var(--transform-down-middle);
    --head-transform-down-beside: var(--transform-down-beside);
  }
  #head_title.hidden {
    transform: translateY(-100%);
    pointer-events: none; /* 隐藏时不可点击 */
  }
  .section {
    flex: 1; /* 每个子元素占据相等空间 */
    height: 100%; /* 子元素高度填满父容器 */
    color: #FFF;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center; /* 文本居中 */
    line-height: var(--background-head-title-line-height-normal); /* 文本垂直居中_行高等于容器 */
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0);
  }
  #title > .section {
    line-height: var(--title-line-height-normal); /* 文本垂直居中_行高等于容器 */
  }
  
  #first_section, #first_section_title {
    display: flex;
    padding-left: 1rem;
    white-space: nowrap;
  }
  #first_section_title {
    color: black;
  }
  #first_section > span, #first_section_title > span {
    /* flex: 1; */
    height: 100%;
    padding: 0 1rem;
    transition: var(--transition-normal);
    transform: translateY(0%);
  }
  #first_section > span:first-child, #first_section_title > span:first-child {
    padding-left: 0;
  }
  #first_section > span:has(+ span:hover){
    transform: translateY(var(--head-transform-down-beside));
  }
  #first_section_title > span:has(+ span:hover) {
    transform: translateY(var(--title-transform-down-beside));
  }
  #first_section > span:hover{
    transform: translateY(var(--head-transform-down-middle));
    text-shadow: 0px 0px 5px #fff;
    /* background-color: rgba(0, 0, 0, .4); 难做 25/03/13 22:34 来自自己 */
  }
  #first_section_title > span:hover {
    transform: translateY(var(--title-transform-down-middle));
    text-shadow: 0px 0px 5px #00000050;
  }
  #first_section > span:hover + span{
    transform: translateY(var(--head-transform-down-beside));
  }
  #first_section_title > span:hover + span {
    transform: translateY(var(--title-transform-down-beside));
  }
  #first_section > span > span, #first_section_title > span > span{
    cursor: pointer;
  }
  /* #first_section > span > span:hover{
    border-bottom: #FFF solid 2px;
  } 挺廉价的 25/03/13 22:33 来自自己 */
  
  #second_section, #second_section_title {
    min-width: 300px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中 */
  }
  #second_section > #search, #second_section_title > #search {
    width: 96%;
    height: 60%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 100px #00000000;
    transition: var(--transition-normal);
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  #second_section_title > #search  {
    box-shadow: 0px 0px 50px #00000000;
  }
  #second_section > #search:hover {
    background-color: rgba(255, 255, 255, 0.64);
    box-shadow: 0px 0px 30px #00000050;
  }
  #second_section_title > #search:hover {
    background-color: rgba(255, 255, 255, 0.74);
    box-shadow: 0px 0px 25px #00000030;
  }
  #second_section > #search:has(> .input:focus) {
    box-shadow: 0px 0px 5px #00000070;
  }
  #second_section_title > #search:has(> .input:focus) {
    box-shadow: 0px 0px 5px #00000040;
  }
  
  #second_section > #search > .input, #second_section_title > #search > .input {
    display: block;
    width: 90%;
    height: 80%;
    box-sizing: border-box;
    margin: 0 0.3rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    color:#3b3b3b;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1.6px solid #aaaaaa00;
    outline: none;
    transition: border-color var(--transition-quick) ease;
  }
  #second_section > #search > .input:focus, #second_section_title > #search > .input:focus {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: #007bff;
  }
  #second_section > #search > #search_btn, #second_section_title > #search > #search_btn {
    width: 7%;
    min-width: 30px;
    height: 80%;
    box-sizing: border-box;
    padding: 0.2rem;
    margin-right: 0.3rem;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: url(img/search.png);
    border-radius: 4px;
    border: 1.6px solid #aaaaaa00;
    transition: var(--transition-quick);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-size: 46%;
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 防止图片平铺 */
  }
  #second_section > #search > #search_btn:active, #second_section_title > #search > #search_btn:active {
    background-color: rgba(0, 0, 0, 0.2);
    transition: none;
  }
  
  #third_section, #third_section_title {
    display: flex;
    flex-direction: row-reverse;
    padding-right: 1rem;
    white-space: nowrap;
  }
  #third_section_title {
    color: black;
  }
  #third_section > span, #third_section_title > span {
    height: 100%;
    padding: 0 1rem;
    transform: translateY(0%);
    transition: var(--transition-normal);
  }
  #third_section > span:first-child, #third_section_title > span:first-child {
    padding-right: 0;
  }
  #third_section > span:has(+ span:hover) {
    transform: translateY(var(--head-transform-down-beside));
  }
  #third_section_title > span:has(+ span:hover) {
    transform: translateY(var(--title-transform-down-beside));
  }
  #third_section > span:hover {
    transform: translateY(var(--head-transform-down-middle));
    text-shadow: 0px 0px 5px #fff;
  }
  #third_section_title > span:hover {
    transform: translateY(var(--title-transform-down-middle));
    text-shadow: 0px 0px 5px #00000050;
  }
  #third_section > span:hover + span {
    transform: translateY(var(--head-transform-down-beside));
  }
  #third_section_title > span:hover + span{
    transform: translateY(var(--title-transform-down-beside));
  }
  #third_section > span > span, #third_section_title > span > span {
    cursor: pointer;
  }
  
  
  #body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; 水平居中 */
    /* align-items: center; 垂直居中 */
  }
  
  
  #in_head {
    width: auto;
    padding: 0 var(--layout-padding);
  }
  #in_head_in {
    height: 7.5rem;
    width: 100%;
    box-sizing: border-box;
    /* padding: 1rem 0; */
    color: #FFF;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center; /* 文本居中 */
    line-height: var(--background-head-title-line-height-normal); /* 文本垂直居中_行高等于容器 */
    /* background-color:rgb(255, 200, 200); */
    display: flex;
    justify-content: space-between;
    --in-in-section-width: 14.8%;
    --in-in-section-padding: 1rem;
  }
  .head_section {
    height: 100%; /* 子元素高度填满父容器 */
  }
  
  #head_first_section {
    min-width: 150px;
    width: var(--in-in-section-width);
    max-width: 160px;
    box-sizing: border-box;
    padding-left: 0.8rem;
    padding-right: 1.2rem;
    gap: 10%;
    letter-spacing: 0.1rem;
    /* 注意居中问题 25/03/18 19:59 来自自己 */
    color: black;
    /* background-color: aquamarine; */
    display: flex;
    align-items: center; /* 垂直居中 */
  }
  #head_first_section > .head_first_section_in {
    display: flex;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1rem 0;
  }
  
  #head_first_section_left_in, #head_first_section_right_in {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  #head_first_section_left_icon, #head_first_section_right_icon {
    width: 86%;
    aspect-ratio: 1/1; /* 宽高比1/1 */
    box-sizing: border-box;
    /* border: 1px solid #ccc; */
    border-radius: 100%;
    vertical-align: middle;
  }
  #head_first_section_left_in:hover, #head_first_section_right_in:hover {
    cursor: pointer; /* 鼠标变手 */
  }
  #head_first_section_left_icon {
    background-color: rgb(255, 146, 18);
    transition: var(--transition-quick);
  }
  #head_first_section_left_icon:hover {
    background-color: rgb(255, 162, 56);
  }
  #head_first_section_right_icon {
    background-color: #f07775;
    transition: var(--transition-quick);
  }
  #head_first_section_right_icon:hover {
    background-color: #f68785;
  }
  /* #head_first_section > #head_first_section_left {
    background-color: #56a8ff;
  }
  #head_first_section > #head_first_section_right {
    background-color: #a176ff;
  } */
  
  #head_second_section {
    height: 100%;
    min-width: 670px;
    width: calc(100% - var(--in-in-section-width));
    box-sizing: border-box;
    padding: calc(1.4* var(--in-in-section-padding)) 0;
    /* background-color: powderblue; */
  }
  #head_second_section_in {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 1rem;
    border-left: solid 1px #ebebeb;
    border-right: solid 1px #ebebeb;
    justify-content: space-between;
    white-space: nowrap;
    gap: var(--head-second-section-in-gap);
    --head-second-section-in-gap: 14px;
  }
  #head_second_section_in > span {
    height: calc(50% - var(--head-second-section-in-gap));
    width: calc(14.28% - var(--head-second-section-in-gap)); /* 每个色块占据1/6宽度减去间距 */
    box-sizing: border-box;
    line-height: 29px;
    color: #61666d;
    border: solid 1px #f1f2f3;
    border-radius: 6px;
    background-color: #f6f7f8;
    transition: background-color var(--transition-normal);
    cursor: pointer;
  }
  #head_second_section_in > span:hover {
    color: #424242;
    background-color: rgb(231, 232, 233);
  }
  
  #head_third_section {
    height: 100%;
    min-width: 220px;
    flex: 1;
    max-width: 240px;
    box-sizing: border-box;
    padding: 1rem;
    /* background-color: lightskyblue; */
  }
  #head_third_section_in {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    --head-third-section-in-gap: 14px;
  }
  #head_third_section_in > span {
    height: var(--third-section-height);
    --third-section-height: 44px;
    width: calc(100px - var(--head-third-section-in-gap));
    box-sizing: border-box;
    line-height: var(--third-section-height);
    color: black;
    cursor: pointer;
    transition: var(--transition-quick);
  }
  #head_third_section_in > span:hover {
    color: pink;
  }
  
  
  #body_in {
    min-width: 910px;
    width: auto;
    flex: 1;
  }
  #body_in_box {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    /* background-color:rgb(255, 250, 150); */
    display: flex;
    flex-direction: column;
    --cards-border-radius: 0.5rem;
    --cards-translateY-up: -1%;
  }
  
  #body_in_box_top {
    min-height: 420px;
    width: 100%;
    /* aspect-ratio: 16/5; 设置宽高比为16:5 你要宽高比干什么 */
    box-sizing: border-box;
    padding: 0 var(--layout-padding);
    /* background-color: rgb(215, 250, 215); */
    display: flex;
    gap: 1rem;
  }
  #in_box_top_left {
    width: var(--in-in-top-left-width);
    /* background-color: rgb(141, 255, 255); */
    --in-in-top-left-width: 46%
  }
  #in_box_top_left_in {
    /* min-height: 350px;
    min-width: 520px; */
    width: 98%;
    aspect-ratio: 3/2; /* 设置宽高比为3:2 */
  }
  
  .cycle_img {
    height: 100%;
    width: 100%;
    border-radius: var(--cards-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* 子绝父相 */
    transition: var(--transition-normal);
    transform: translateY(0);
  
    --color-r: 0;
    --color-g: 0;
    --color-b: 0;
    --color-a: 1;
    --bottom-z-index: 1;
  }
  .cycle_img:hover {
    transform: translateY(var(--cards-translateY-up));
    box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.06),
                0px 4px 10px 0px rgba(0, 0, 0, 0.09),
                0px 8px 14px 0px rgba(0, 0, 0, 0.03),
                0px 12px 18px 0px rgba(0, 0, 0, 0.06),
                0px 12px 26px 0px rgba(0, 0, 0, 0.09);
  }
  
  #cycle_img_top {
    height: 80%;
    /* flex: 4; */
    background-color: rgb(255, 255, 250);
    box-shadow: 0px 0px 30px 18px rgba(255, 230, 0, 0);
    transition: var(--transition-normal) ease-in-out; /* 添加过渡效果 */
  }
  #cycle_img_top_in {
    height: 100%;
    width: 100%;
    /* 图片按比例填充 */
    background-size: cover;
    /* 图片居中显示 */
    background-position: center;
    /* 防止图片平铺 */
    background-repeat: no-repeat; /* 这三条好像没啥用 */
    /* 保持图片的宽高比 */
    /* object-fit: cover; */
    /* 保持图片的宽高比并完全显示图片 */
    /* object-fit: contain;  */
    transition: filter var(--transition-normal) ease-in-out;
    z-index: var(--bottom-z-index);
  }
  .cycle_img_top_visual {
    cursor: pointer; /* 鼠标变手 */
    position: absolute;
    top: 0%;
    left: 0%;
    height: 80%;
    width: 100%;
  }
  .cycle_img:has(.cycle_img_top_visual:active) {
    /* transition: none; */
    transition: var(--transition-very-quick);
    transform: translateY(calc(var(--cards-translateY-up) * 0.4));
    box-shadow: 0px 4px 6px 4px rgba(0, 0, 0, 0.06),
                0px 4px 6px 0px rgba(0, 0, 0, 0.09),
                0px 6px 8px 0px rgba(0, 0, 0, 0.03),
                0px 6px 12px 0px rgba(0, 0, 0, 0.06),
                0px 8px 18px 0px rgba(0, 0, 0, 0.09);
  }
  #cycle_img_top_animation {
    box-shadow: 0px 0px 1000px 100px rgb(0, 0, 0) inset;
    z-index: calc(var(--bottom-z-index) + 1);
    mix-blend-mode: color-dodge;
    /* 瞎眼 */
    /* background-color: rgba(255, 255, 255, 0.1);
    animation: flickering 0.2s infinite linear; */
  }
  #cycle_img_top_animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 150%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 90%, rgba(255, 255, 255, 0.2) 100%);
    filter: blur(30px);
    animation: scanline 6.5s infinite linear;
  }
  /* 瞎眼 */
  /* @keyframes flickering {
    0% {
      background-color: rgb(255, 255, 255, 0.1);
    }
    50% {
      background-color: rgb(255, 255, 255, 0);
    }
    100% {
      background-color: rgb(255, 255, 255, 0.1);
    }
  } */
  @keyframes scanline {
    0% {
      top: -200%;
    }
    85% {
      top: 150%;
    }
    100% {
      top: 150%;
    }
  }
  #cycle_img_top_shadow {
    box-shadow: 0px 0px 8px -6px rgb(0, 0, 0) inset, 
                0px -9px 6px -10px rgb(0, 0, 0) inset;
    z-index: calc(var(--bottom-z-index) + 2);
  }
  
  #cycle_img_bottom {
    height: 20%;
    /* flex: 1; */
    background-color: rgba(var(--color-r), var(--color-g), var(--color-b), calc(var(--color-a)));
    transition: var(--transition-normal);
    z-index: calc(var(--bottom-z-index) + 3);
  }
  #cycle_img_bottom_in {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    display: flex;
  }
  
  #cycle_img_text_and_points {
    flex: 3;
    height: 100%;
  }
  
  #cycle_img_text {
    height: 50%;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    z-index: calc(var(--bottom-z-index) + 4);
    cursor: default; /* 原始鼠标 */
  }
  
  #cycle_img_points {
    height: 50%;
    /* 垂直居中 */
    align-items: center;
    margin: 0;
    justify-content: flex-start;
    display: flex;
    z-index: calc(var(--bottom-z-index) + 4);
  }
  #cycle_img_points dd {
    height: 40%;
    aspect-ratio: 1/1; /* 宽高比1/1 */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, var(--point-color-a));
    margin: 0 1%;
    cursor: pointer; /* 鼠标变手 */
    transition: background-color var(--transition-quick);
    --point-color-a: 0.5;
  }
  #cycle_img_points dd:first-child {
    margin-left: 0;
  }
  #cycle_img_points dd:last-child {
    margin-right: 0;
  }
  #cycle_img_points dd:hover {
    background-color: rgba(255, 255, 255, calc(var(--point-color-a) + 0.2));
  }
  #cycle_img_points dd:active {
    background-color: rgba(255, 255, 255, calc(var(--point-color-a) + 0.1));
    transition: none;
  }
  #cycle_img_points .cycle_img_high_light_point {
    background-color: rgba(255, 255, 255, calc(var(--point-color-a) + 0.4));
  }
  #cycle_img_points .cycle_img_high_light_point:hover {
    background-color: rgba(255, 255, 255, calc(var(--point-color-a) + 0.5));
  }
  #cycle_img_points .cycle_img_high_light_point:active {
    background-color: rgba(255, 255, 255, calc(var(--point-color-a) + 0.4));
    transition: none;
  }
  
  #cycle_img_buttons_and_numbers {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  #cycle_img_buttons {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
  }
  .cycle_img_button {
    height: 50%;
    aspect-ratio: 1/1; /* 宽高比1/1 */
    /* margin-top: 0.2rem; */
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 30%;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--bottom-z-index) + 4);
    transition: var(--transition-quick);
  }
  .cycle_img_button_in {
    height: 80%;
  }
  #cycle_img_r_button {
    margin-right: 0.4rem;
  }
  .cycle_img_button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transition: var(--transition-very-quick);
    cursor: pointer; /* 鼠标变手 */
  }
  .cycle_img_button:active {
    background-color: rgba(0, 0, 0, 0.3);
    transition: none;
  }
  
  #in_box_top_right {
    flex: 1;
    /* background-color: rgb(255, 222, 173); */
  }
  #in_box_top_right_in {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--in-in-top-right-in-gap);
    --in-in-top-right-in-gap: 1rem;
  }
  .in_box_top_right_in_span {
    width: calc(33.33% - var(--in-in-top-right-in-gap));
    /* height: calc(51.8% - var(--in-in-top-right-in-gap)); */
    /* 设置宽高比为4:3 */
    aspect-ratio: 4/3;
    margin-bottom: 1.6rem;
    background-color: white;
    /* overflow: hidden; */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal); /* 仅对 transform 和 box-shadow 应用过渡效果 */
    transform: translateY(0);
  }
  .content_box {
    border-radius: var(--cards-border-radius);
    transition: var(--transition-normal);
  }
  /* .in_box_top_right_in_span_in {
    background-color: greenyellow;
  } */
  .content_box_in {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer; /* 鼠标变手 */
  }
  /* .in_box_top_right_in_span_in > .in_box_top_right_in_span_in_img {
    flex: 66;
    background-color: aquamarine;
  } */
  .content_box_img {
    aspect-ratio: 2/1;
    border: 0;
    border-radius: var(--cards-border-radius);
    overflow: hidden;
    transform: translateY(0);
    transition: var(--transition-normal);
  }
  .content_box:hover {
    transform: translateY(calc(var(--cards-translateY-up) * 1.2));
    box-shadow: 0px 4px 16px 4px rgba(0, 0, 0, 0.01),
                0px 6px 18px 4px rgba(0, 0, 0, 0.02),
                0px 8px 20px 4px rgba(0, 0, 0, 0.01),
                0px 10px 8px 0px rgba(0, 0, 0, 0.01),
                0px 12px 12px 0px rgba(0, 0, 0, 0.01)
                ;
  }
  .content_box:active {
    transition: var(--transition-very-quick);
    transform: translateY(calc(var(--cards-translateY-up) * 0.6));
    box-shadow: 0px 4px 16px 2px rgba(0, 0, 0, 0.01),
                0px 6px 18px 1px rgba(0, 0, 0, 0.02),
                0px 6px 20px 2px rgba(0, 0, 0, 0.01),
                0px 4px 8px 0px rgba(0, 0, 0, 0.01),
                0px 4px 12px 0px rgba(0, 0, 0, 0.01)
                ;
  }
  .content_box:hover .content_box_img {
    transform: translateY(calc(var(--cards-translateY-up) * 1));
    box-shadow: 0px 4px 2px 1px rgba(0, 0, 0, 0.02),
                0px 6px 6px 2px rgba(0, 0, 0, 0.04),
                0px 8px 8px 4px rgba(0, 0, 0, 0.02)
                /* 0px 10px 8px 0px rgba(0, 0, 0, 0.01),
                0px 12px 12px 0px rgba(0, 0, 0, 0.01) */
                ;
  }
  .content_box:active .content_box_img {
    transition: var(--transition-very-quick);
    transform: translateY(calc(var(--cards-translateY-up) * 0));
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.02),
                0px 2px 6px 2px rgba(0, 0, 0, 0.04),
                0px 4px 8px 4px rgba(0, 0, 0, 0.02)
                /* 0px 10px 8px 0px rgba(0, 0, 0, 0.01),
                0px 12px 12px 0px rgba(0, 0, 0, 0.01) */
                ;
  }
  .content_box_img > img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 或者使用 contain */
    display: block; /* 去除图片下方的空白间隙 */
  }
  /* .in_box_top_right_in_span_in > .in_box_top_right_in_span_in_text {
    background-color: antiquewhite;
  } */
  .content_box_text {
    flex: 34;
    margin: 0 0.1rem 0.2rem 0.1rem;
    display: flex;
    flex-direction: column;
  }
  .content_box_title {
    color: black;
    font-weight: 500;
    font-size: 102.5%;
    white-space: normal; /* 允许自动换行 */
    overflow-wrap: break-word; /* 确保长单词或 URL 换行 */
    display: -webkit-box; /* 使用 WebKit 的盒模型 */
    -webkit-line-clamp: 2; /* 限制行数为2行 */
    -webkit-box-orient: vertical; /* 垂直排列内容 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 在溢出时显示省略号 */
  
    /* 补充标准属性（未来可能支持） */
    line-clamp: 2; /* 限制行数为2行 */
  }
  /* .in_box_top_right_in_span_in_text > .in_box_top_right_in_span_in_text_others {
    background-color: deepskyblue;
  } */
  .content_box_others {
    flex: 2;
    color: gray;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  /* .in_box_top_right_in_span_in_text_others > .in_box_top_right_in_span_in_others_info {
    background-color: dodgerblue;
  } */
  .content_box_info {
    flex: 5;
  }
  /* .in_box_top_right_in_span_in_text_others > .in_box_top_right_in_span_in_others_time {
    background-color: blue;
  } */
  .content_box_time {
    flex: 3;
    text-align: right;
  }
  
  
  #body_in_box_bottom {
    flex: 1;
    margin-top: 1rem;
    /* background-color: rgb(255, 165, 165); */
  
    --title-box-height: 20%;
    --z-index-title: 10;
    --title-top: 16.8%;
    --title-left: 8%;
    --bottom-div-in-relative-height: 100%;
    /* --bottom-div-in-relative-height: 88%; */
    --bottom-div-content-background-height: 100%;
    --bottom-div-content-background-width: 100%;
  }
  #body_in_box_bottom_in {
    height: 390rem;
    width: 100%;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
  }
  
  #body_in_box_bottom_in > div {
    flex: 1;
    overflow: hidden;
  }
  #body_in_box_bottom_in > div:nth-child(odd) {
    background-color: bisque;
  }
  #body_in_box_bottom_in > div:nth-child(even) {
    background-color: antiquewhite;
  }
  
  #body_in_box_bottom_in > div > .bottom_div_in {
    height: var(--bottom-div-in-relative-height);
    position: relative;
    top: calc((100% - var(--bottom-div-in-relative-height)) / 2);
    background-color: rgb(0, 0, 0, 0.05);
  }
  .bottom_div_in > .bottom_div_title_box {
    height: var(--title-box-height);
    width: 100%;
    position: absolute;
    top: var(--title-top);
    /* background-color: rgb(0, 0, 0, 0.05); */
    z-index: var(--z-index-title);
  }
  .bottom_div_title_box > .bottom_div_title {
    height: 100%;
    position: absolute;
    left: var(--title-left);
    filter: drop-shadow(0px 0px 40px rgb(0, 0, 0, 0.8));
    transition: var(--transition-slow);
    transform: translateX(0);
  }
  .bottom_div_title_box > .bottom_div_title::selection {
    background-color: transparent; /* 透明 */
    color: inherit; /* 继承父元素的文字颜色 */
  }
  .bottom_div_title_description_box {
    height: 50%;
    width: calc(100% - calc(var(--title-left) + 40px));
    position: absolute;
    top: calc(var(--title-top) + var(--title-box-height) + 75%);
    left: calc(var(--title-left) + 40px);
    /* margin-left: clamp(calc(var(--title-left) + 2%), calc(var(--title-left) + 2.3%), calc(var(--title-left) + 3%)); */
    /* background-color: rgba(0, 0, 0, 0.4); */
    z-index: calc(var(--z-index-title) - 2);
  }
  .bottom_div_in.white_font .bottom_div_title_description, .bottom_div_in.black_font .bottom_div_title_description {
    height: 100%;
    filter: opacity(0%) drop-shadow(0px 0px 6px rgb(255, 255, 255));
    transition: var(--transition-slow);
    transition-delay: var(--transition-delay-none);
    transform: translateY(30%);
  }
  .bottom_div_in.black_font .bottom_div_title_description {
    filter: opacity(0%) drop-shadow(0px 0px 6px #1f1f1f);
  }
  .bottom_div_title_others {
    height: 25%;
    width: 80%;
    position: absolute;
    bottom: -220%;
    left: calc(var(--title-left) + 40px);
    /* background-color: rgba(0, 0, 0, 0.4); */
    z-index: calc(var(--z-index-title) - 2);
    display: flex;
  }
  .bottom_div_title_count_box {
    flex: 1;
    /* background-color: rgba(255, 0, 0, 0.4); */
    display: flex;
  }
  .bottom_div_in.white_font .bottom_div_title_count, .bottom_div_in.black_font .bottom_div_title_count, .bottom_div_in.white_font .bottom_div_title_time, .bottom_div_in.black_font .bottom_div_title_time {
    height: 100%;
    filter: opacity(0%) drop-shadow(0px 0px 6px rgb(255, 255, 255));
    transition: var(--transition-slow);
    transition-delay: var(--transition-delay-normal);
    transform: translateY(30%);
  }
  .bottom_div_in.black_font .bottom_div_title_count, .bottom_div_in.black_font .bottom_div_title_time {
    filter: opacity(0%) drop-shadow(0px 0px 6px #1f1f1f);
  }
  .bottom_div_title_time_box {
    flex: 1;
    /* background-color: rgba(0, 81, 255, 0.4); */
    display: flex;
    justify-content: flex-end;
  }
  .bottom_div_title_time {
    transition-delay: var(--transition-delay-bit);
  }
  
  .bottom_div_content_box {
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.05);
    position: relative;
  }
  .bottom_div_content_left_blur  {
    height: 100%;
    width: 6.8%;
    position: absolute;
    backdrop-filter: blur(30px) brightness(100%);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.42),
                /* 注意性能 */
                0px 20px 20px -20px rgba(0, 0, 0, 0.45) inset,
                0px -20px 16px -24px rgba(0, 0, 0, 0.45) inset;
    /* z-index: calc(var(--z-index-title) - 2); */
    z-index: calc(var(--z-index-title) + 1);
    transition: var(--transition-very-slow);
    transform: translateX(-120%);
  }
  .bottom_div_content_left_text_box {
    height: 100%;
    width: 100%;
    /* background-color: rgb(0, 0, 0, 0.5); */
    /* 注意兼容性 */
    display: grid;
    place-items: center;  /* 同时水平和垂直居中 */
    transition: var(--transition-slow);
    transform: translateX(-75%);
  }
  .bottom_div_in.active .bottom_div_content_left_text_box {
    transition-delay: var(--transition-delay-bit);
    transform: translateX(0);
  }
  .bottom_div_in.white_font .bottom_div_content_left_text, .bottom_div_in.black_font .bottom_div_content_left_text {
    /* background-color: rgb(0, 0, 0, 0.5); */
    width: 34px;
    height: 233px;
    white-space: normal; /* 允许自动换行 */
    font-size: 180%;
    letter-spacing: 8px;
    color: rgb(255, 255, 255, 1);
    /* 注意兼容性 */
    writing-mode: vertical-rl;
    writing-mode: sideways-rl;
    text-shadow: 0px 0px 8px rgb(255, 255, 255, 0.2);
    transition: var(--transition-slow);
  }
  .bottom_div_in.black_font .bottom_div_content_left_text {
    color: #232323;
    text-shadow: 0px 0px 3px #2e2e2ecb;
  }
  .bottom_div_content_blur {
    height: 102%;
    width: 102%;
    position: absolute;
    top: 0%;
    backdrop-filter: blur(10px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.15);
    transition: var(--transition-slow);
    z-index: calc(var(--z-index-title) - 1);
  }
  .bottom_div_content_background {
    height: var(--bottom-div-content-background-height);
    width: var(--bottom-div-content-background-width);
    position: absolute;
    top: calc((100% - var(--bottom-div-content-background-height)) / 2);
    left: calc((100% - var(--bottom-div-content-background-width)) / 2);
    background-size: cover; /* 图片按比例填充 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 防止图片平铺 */
    object-fit: cover;
    transition: var(--transition-slow);
    z-index: calc(var(--z-index-title) - 3);
  }
  .bottom_div_in:hover .bottom_div_title {
    filter: drop-shadow(0px 0px 24px rgb(0, 0, 0, 0.3))
            drop-shadow(0px 0px 20px rgb(0, 0, 0, 0.2))
            ;
    transform: translateX(0.6rem);
  }
  .bottom_div_title_box:hover {
    cursor: pointer; /* 鼠标变手 */
  }
  .bottom_div_title_description_box:hover {
    cursor: default; /* 初始鼠标 */
  }
  .bottom_div_title_others:hover {
    cursor: default; /* 初始鼠标 */
  }
  .bottom_div_in.active .bottom_div_title {
    transition: var(--transition-slow);
    filter: drop-shadow(0px 0px 18px rgb(0, 0, 0, 0.4))
            drop-shadow(0px 0px 6px rgb(0, 0, 0, 0.1))
            drop-shadow(0px 0px 4px rgb(0, 0, 0, 0.1))
            ;
    transform: translateX(1.6rem);
  }
  .bottom_div_in.active .bottom_div_content_left_blur {
    transform: translateX(0);
  }
  .bottom_div_in.active .bottom_div_content_blur {
    backdrop-filter: blur(0px) brightness(100%);
    background-color: rgba(255, 255, 255, 0);
    /* 注意性能 */
    box-shadow: 
                /* 0px 6px 10px 0px rgba(0, 0, 0, 0.08) inset,
                0px 6px 6px 0px rgba(0, 0, 0, 0.06) inset, */
                0px 2px 12px 0px rgba(0, 0, 0, 0.42) inset,
                /* 0px -6px 10px 0px rgba(0, 0, 0, 0.08) inset,
                0px -6px 6px 0px rgba(0, 0, 0, 0.06) inset, */
                0px -10px 10px 0px rgba(0, 0, 0, 0.42) inset;
  }
  
  .bottom_div_in.white_font.active .bottom_div_title_description, .bottom_div_in.black_font.active .bottom_div_title_description {
    transition-delay: var(--transition-delay-bit);
    filter: opacity(100%) drop-shadow(0px 0px 0px rgb(255, 255, 255));
    transform: translateY(0);
  }
  .bottom_div_in.black_font.active .bottom_div_title_description {
    filter: opacity(100%) drop-shadow(0px 0px 0px #1f1f1f);
  }
  .bottom_div_in.white_font.active .bottom_div_title_count, .bottom_div_in.black_font.active .bottom_div_title_count {
    transition-delay: var(--transition-delay-more);
    filter: opacity(100%) drop-shadow(0px 0px 0px rgb(255, 255, 255));
    transform: translateY(0);
  }
  .bottom_div_in.black_font.active .bottom_div_title_count {
    filter: opacity(100%) drop-shadow(0px 0px 0px #1f1f1f);
  }
  .bottom_div_in.white_font.active .bottom_div_title_time, .bottom_div_in.black_font.active .bottom_div_title_time {
    transition-delay: var(--transition-delay-macro);
    filter: opacity(100%) drop-shadow(0px 0px 0px rgb(255, 255, 255));
    transform: translateY(0);
  }
  .bottom_div_in.black_font.active .bottom_div_title_time {
    filter: opacity(100%) drop-shadow(0px 0px 0px #1f1f1f);
  }

  #bottom_div_in_3.active .bottom_div_title_count {
    padding-left: 0.2rem;
  }
  #bottom_div_in_3.active .bottom_div_content_left_blur {
    background-color: rgba(16, 27, 73, 0.2);
  }
  #bottom_div_in_3 .bottom_div_content_blur{
    backdrop-filter: blur(12px) brightness(88%);
    background-color: rgba(255, 255, 255, 0.1);
  }
  #bottom_div_in_3.active .bottom_div_content_blur{
    backdrop-filter: blur(0px) brightness(100%);
  }
  
  .bottom_div_in.active .bottom_div_content_background {
    --bottom-div-content-background-height: 101%;
    --bottom-div-content-background-width: 101%;
  }

  .has_active {
    cursor: pointer; /* 鼠标变手 */
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: rgba(0, 119, 255, 0.3); */
    z-index: calc(var(--z-index-title) + 1);
  }
  /* .has_active.active_1 {
    background-color: rgba(255, 0, 0, 0.3);
  } */
  /* 神奇特性 */
  /* .bottom_div_content_box > .has_active.active_1 .bottom_div_content_left_blur {
    width: 100%;
  } */
  
  /* 宽度小于1040则变为移动端样式 */
  /* 难写, 不写了淦 */
  /* @media (min-width: 1040px) {
  } */
  
  /* 这尼玛又是什么神奇逻辑啊 */
  @media (max-width: 1399.9px) {
    #body_in_box_top {
      padding: 0 40px;
    }
    #in_box_top_right_in .in_box_top_right_in_span:nth-last-child(-n+2) {
      display: none;
    }
    .in_box_top_right_in_span {
      width: calc(50% - var(--in-in-top-right-in-gap));
    }
  }
  @media (min-width: 1140px) and (max-width: 1399.9px) {
    :root {
      --layout-padding: 40px;
    }
    #in_box_top_left {
      --in-in-top-left-width: 50%
    }
  }
  @media (min-width: 1400px) and (max-width: 1559.9px) {
    :root {
      --layout-padding: 60px;
    }
    #head > img {
      --logo-top: 1.1rem;
      --logo-left: 6rem;
    }
  }
  @media (min-width: 1560px) and (max-width: 2059.9px) {
    :root {
      --layout-padding: 140px;
    }
    #head > img {
      --logo-top: 1.6rem;
      --logo-left: 8rem;
    }
  }
  @media (min-width: 2060px) {
    :root {
      --layout-padding: 160px;
    }
    #head > img {
      --logo-top: 26%;
      --logo-left: 6%;
    }
  }
  @media (min-width: 3072px) {
    #background, #second_floor_body {
      width: 80%;
    }
    #second_floor_body_top_left {
      aspect-ratio: 2/1; /* 宽高比2/1 */
    }
  }
  @media (min-width: 4096px) {
    #background, #second_floor_body {
      width: 55%;
    }
    #second_floor_body_top_left {
      aspect-ratio: 21/9; /* 宽高比21/9 */
    }
  }
  @media (min-width: 5120px) {
    #background, #second_floor_body {
      width: 40%;
    }
    #second_floor_body_top_left {
      aspect-ratio: 2.35/1; /* 宽高比2.35/1 */
    }
  }
  
  @media (min-width: 1400px) {
    #in_box_top_left {
      --in-in-top-left-width: 40%
    }
  }
  @media (min-width: 2059.9px) {
    #second_floor_body_top_left {
      aspect-ratio: 16/9; /* 宽高比16/9 */
    }
  }

  @media (max-width: 1399.9px) {
    #second_floor_body_top_left {
      aspect-ratio: 4/3; /* 宽高比4/3 */
    }
  }
